<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2003), see www.w3.org"/>
    <title>JavaScript: Basics</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="copyright" content="Copyright &#169; 2005-2010 W3C (MIT, ERCIM, Keio)"/>
    <meta name="duration" content="5"/>
    <meta name="font-size-adjustment" content="-2"/>

    <link rel="stylesheet" href="styles/slidy.css" type="text/css"/>
    <link rel="stylesheet" href="styles/w3c-blue.css" type="text/css"/>
	<script type="text/javascript" src="scripts/slidy.js" charset="utf-8">//</script>

    <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
    <script type="text/javascript" src="scripts/shCore.js"></script>
    <script type="text/javascript" src="scripts/shBrushJScript.js"></script>

    <link type="text/css" rel="stylesheet" href="styles/presentation.css"/>
    <script type="text/javascript" src="scripts/presentation.js"></script>
</head>


<body style="background: white; font-family: Helvetica">
<div class="background">
    <img alt="" id="head-icon" src="graphics/icon-blue.png"/>
</div>

<div class="background slanty">
</div>

<div class="slide cover title">
    <img class="hidden" src="graphics/bullet.png" alt=""/>
    <img class="hidden" src="graphics/fold.gif" alt=""/>
    <img class="hidden" src="graphics/unfold.gif" alt=""/>
    <img class="hidden" src="graphics/fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/unfold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold-dim.gif" alt=""/>

    <h1>JS Ecosystem</h1>

    <div style="position: absolute; bottom: 20px;">
        <p>Alex Kolonitsky (Java)</p>
        <p><a href="http://javascript-learning-courses.googlecode.com/svn/trunk/Intermidiate-04-OOP.html">http://javascript-learning-courses.googlecode.com/svn/trunk/Intermidiate-04-OOP.html</a></p>
    </div>
</div>

<div class="slide">
    <h1>JS Ecosystem</h1>

    <ul>
        <li>Testing JS (JSUnit, Jasmine)</li>
        <li>Testing HTML (Selenium IDE)</li>
        <li>Code Quality (JSLint\JSHint\JSDoc)</li>
        <li>Web Page Optimization (YSlow, YUI, ...)</li>
        <li>Как со всем этим работать? (Maven)</li>
        <li>CoffeScript & Dart</li>
    </ul>
</div>

<div class="slide">
    <h1>JS Ecosystem</h1>

    <ul class="content">
        <li class="current">Testing JS (JSUnit, Jasmine)</li>
        <li>Testing HTML (Selenium IDE)</li>
        <li>Code Quality (JSLint\JSHint\JSDoc)</li>
        <li>Web Page Optimization (YSlow, YUI, ...)</li>
        <li>Как со всем этим работать? (Maven)</li>
        <li>CoffeScript & Dart</li>
    </ul>
</div>

<div class="slide">
    <h1>Testing JS</h1>

    <dl>
        <dt>JSUnit</dt>
        <dd>
            JsUnit is a Unit Testing framework for client-side (in-browser) JavaScript
            <ul>
                <li><a href="http://www.jsunit.net/">http://www.jsunit.net/</a></li>
                <li><a href="http://jstips.ru/tag/jsunit/">Доп ресурсы</a></li>
                <li><a href="http://docs.jquery.com/QUnit">QUnit is a powerful, easy-to-use, JavaScript test suite</a></li>
            </ul>
        </dd>
        <dt>Jasmine</dt>
        <dd>
            Jasmine is a BDD framework for testing your JavaScript code.
            <a href="http://pivotal.github.com/jasmine/">http://pivotal.github.com/jasmine/</a>
            <a href="http://tryjasmine.com/">Expect panda toBe happy</a>
        </dd>
    </dl>
</div>

<div class="slide">
    <h1>Jasmine</h1>

    <p>It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.</p>
    <pre class="brush: js">
        describe('Calculator', function () {
            it('can add a number', function () {
                ...
            });

            it('can multiply some numbers', function () {
                ...
            });
        });
    </pre>
</div>

<div class="slide">
    <h1>Links</h1>

    <ul>
        <li><a href="http://habrahabr.ru/blogs/tdd/107262/" rel="nofollow">Эволюция юнит-теста</a></li>
        <li><a href="http://en.wikipedia.org/wiki/Behavior_Driven_Development" rel="nofollow">Behavior Driven Development</a></li>
        <li><a href="http://dannorth.net/introducing-bdd/" rel="nofollow">Introducing BDD</a></li>
        <li><a href="http://tddjs.com/">Test-Driven JavaScript Development</a></li>
    </ul>
</div>


<div class="slide">
    <h1>JS Ecosystem</h1>

    <ul class="content">
        <li class="done">Testing JS (JSUnit, Jasmine)</li>
        <li class="current">Testing HTML (Selenium IDE)</li>
        <li>Code Quality (JSLint\JSHint\JSDoc)</li>
        <li>Web Page Optimization (YSlow, YUI, ...)</li>
        <li>Как со всем этим работать? (Maven)</li>
        <li>CoffeScript & Dart</li>
    </ul>
</div>

<div class="slide">
    <h1>Selenium - Automate routine</h1>

    <ul>
        <li><a href="http://seleniumhq.org/">Selenium</a></li>
        <li><a href="http://seleniumhq.org/projects/ide/">Selenium IDE Plugins</a></li>
        <li>Example...</li>
    </ul>
</div>

<div class="slide">
    <h1>JS Ecosystem</h1>

    <ul class="content">
        <li class="done">Testing JS (JSUnit, Jasmine)</li>
        <li class="done">Testing HTML (Selenium IDE)</li>
        <li class="current">Code Quality (JSLint\JSHint\JSDoc)</li>
        <li>Web Page Optimization (YSlow, YUI, ...)</li>
        <li>Как со всем этим работать? (Maven)</li>
        <li>CoffeScript & Dart</li>
    </ul>
</div>

<div class="slide">
    <h1>Code Quality</h1>

    <dl>
        <dt><a href="http://www.jslint.com/" rel="nofollow">JSLint</a></dt>
        <dd>
            The JavaScript Code Quality Tool (debugger statements, continue, ++ and --, eval, unfiltered for in, messy white space, console, alert, ...)
        </dd>
        <dt><a href="http://www.jshint.com/" rel="nofollow">JSHint</a></dt>
        <dd>Тоже что JSLint только новее и <a href="http://www.jshint.com/options/" rel="nofollow">богаче</a>.</dd>
    </dl>
</div>

<div class="slide">
    <h1>Code Quality: JSDoc</h1>

    <ul>
        <li>Авто генерация документации для вашего кода.</li>
        <li>Добавляем информацию о типах</li>
        <li>Example...</li>
    </ul>
</div>

<div class="slide">
    <h1>JS Ecosystem</h1>

    <ul class="content">
        <li class="done">Testing JS (JSUnit, Jasmine)</li>
        <li class="done">Testing HTML (Selenium IDE)</li>
        <li class="done">Code Quality (JSLint\JSHint\JSDoc)</li>
        <li class="current">Web Page Optimization (YSlow, YUI, ...)</li>
        <li>Как со всем этим работать? (Maven)</li>
        <li>CoffeScript & Dart</li>
    </ul>
</div>

<div class="slide">
    <h1>Page Optimization</h1>

    <dl>
        <dt><a href="http://ru.wikipedia.org/wiki/YSlow" rel="nofollow">YSlow</a></dt>
        <dd>
            Кроме измерения скорости, проводится анализ всех компонентов: есть ли заголовки, вынесены ли стили и скрипты в отдельные файлы, используется ли компрессия, перенаправления... и даются рекомендации по оптимизации.
        </dd>
        <dt>
            <a href="http://code.google.com/intl/ru/speed/page-speed/" rel="nofollow">Page Speed</a></dt>
        <dd>
            Оценка производительности веб-страниц и получение предложений по их улучшению.
        </dd>
    </dl>

    <p>Examples...</p>
</div>

<div class="slide">
    <h1>Compression</h1>

    <dl>
        <dt>YUI Compressor</dt>
        <dd>
            Сжатие JS и CSS
        </dd>
        <dt>Google Closure Compiler</dt>
        <dd>
            Уникальный инструмент, разработанный Google для сжатия и обфускации собственного javascript
        </dd>
    </dl>
</div>

<div class="slide">
    <h1>Google Closure Compiler</h1>

    <p><a href="http://javascript.ru/optimize/google-closure-compiler" rel="nofollow">Google Closure Compiler в деталях</a></p>

    <ul>
        <li>Продвинутые оптимизации</li>
        <li>Объявление и проверка типов в примерах</li>
        <li>Оптимальное ООП с Google Closure Compiler</li>
        <li>Сборка модулей</li>
        <li>Директива @define, удаление веток компилятором</li>
        <li>Автоудаление отладочных свойств и объектов</li>
        <li>...</li>
    </ul>
</div>

<div class="slide">
    <h1>Links</h1>

    <ul>
        <li><a href="webo.in" rel="nofollow">webo.in</a></li>
        <li><a href="http://javascript.ru/optimize/google-closure-compiler" rel="nofollow">Google Closure Compiler</a></li>
    </ul>
</div>

<div class="slide">
    <h1>JS Ecosystem</h1>

    <ul class="content">
        <li class="done">Testing JS (JSUnit, Jasmine)</li>
        <li class="done">Testing HTML (Selenium IDE)</li>
        <li class="done">Code Quality (JSLint\JSHint\JSDoc)</li>
        <li class="done">Web Page Optimization (YSlow, YUI, ...)</li>
        <li class="current ">Как со всем этим работать? (Maven)</li>
        <li>CoffeScript & Dart</li>
    </ul>
</div>

<div class="slide">
    <h1>Как со всем этим работать? (Maven)</h1>

    <dl>
        <dt><a href="http://mojo.codehaus.org/javascript-maven-tools/" rel="nofollow">javascript-maven-tools</a></dt>
        <dd>
            Dependency management, Testing, Packaging in default Maven Build lifecycle
        </dd>
        <dt><a href="http://code.google.com/p/wro4j" rel="nofollow">Wro4j</a></dt>
        <dd>
            Это не просто плагин это ещё библиотека позваляющая автоматизировать все стандартные задачи оптимизации веб ресурсов. (JsMin, Google Closure compressor, YUI Compressor, Css Variables, Less, Sass, CssLint, JsHint, Coffee Script )
        </dd>
    </dl>
</div>


<div class="slide">
    <h1>JS Ecosystem</h1>

    <ul class="content">
        <li class="done">Testing JS (JSUnit, Jasmine)</li>
        <li class="done">Testing HTML (Selenium IDE)</li>
        <li class="done">Code Quality (JSLint\JSHint\JSDoc)</li>
        <li class="done">Web Page Optimization (YSlow, YUI, ...)</li>
        <li class="done ">Как со всем этим работать? (Maven)</li>
        <li class="current">CoffeScript & Dart</li>
    </ul>
</div>

<div class="slide">
    <h1>CoffeeScript & Dart</h1>

    <dl>
        <dt><a href="http://jashkenas.github.com/coffee-script/" rel="nofollow">CoffeeScript</a></dt>
        <dd>... is a little language that compiles into JavaScript.</dd>
        <dt><a href="http://www.dartlang.org" rel="nofollow">Dart</a></dt>
        <dd>... новый язык программирования на основе классов, разработанный компанией Google для создания структурированных веб-приложений.</dd>
    </dl>
</div>

<div class="slide">
    <h1>CoffeeScript: Functions</h1>

    <pre class="brush: js">
        square = (x) -> x * x
        cube   = (x) -> square(x) * x
        fill   = (container, liquid = "coffee") ->
            "Filling the #{container} with #{liquid}..."
    </pre>
</div>

<div class="slide">
    <h1>CoffeeScript: Scopes</h1>

    <pre class="brush: js">
        outer = 1
        changeNumbers = ->
            inner = -1
            outer = 10
        inner = changeNumbers()
    </pre>
</div>

<div class="slide">
    <h1>CoffeeScript: Loops</h1>

    <pre class="brush: js">
        eat food for food in foods when food isnt 'chocolate'

        countdown = (num for num in [10..1])

        // js
        _ref = ['toast', 'cheese', 'wine'];
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
          food = _ref[_i];
          eat(food);
        }
    </pre>
</div>

<div class="slide">
    <h1>CoffeeScript: Classes</h1>

    <pre class="brush: js">
        class Animal
            constructor: (@name) ->
        
            move: (meters) ->
                alert @name + " moved #{meters}m."

        class Snake extends Animal
            move: ->
                alert "Slithering..."
                super 5
    </pre>
</div>

<div class="slide">
    <h1>CoffeeScript: How is it work?</h1>
</div>

<div class="slide">
    <h1>Dart</h1>

    <p>Key features:</p>
    <ul>
        <li>Classes</li>
        <li>Optional types</li>
        <li>Libraries</li>
        <li>Tooling</li>
    </ul>

</div>

<div class="slide">
    <h1>Dart: Classes</h1>

    <pre class="brush: js">
        interface Shape {
          num perimeter();
        }

        class Rectangle implements Shape {
          final num height, width;
          Rectangle(num this.height, num this.width);  // Compact constructor syntax.
          num perimeter() => 2*height + 2*width;       // Short function syntax.
        }

        class Square extends Rectangle {
          Square(num size) : super(size, size);
        }
    </pre>
</div>

<div class="slide">
    <h1>Вопросы / Предложения</h1>

    <ul>
        <li>Alex.Kolonitsky@gmail.com</li>
        <li>akolonitsky@exadel.com</li>
        <li>Skype: Desargues_</li>
        <li>http://code.google.com/p/javascript-learning-courses/issues/list</li>
    </ul>
</div>

</body>
</html>
